<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="flex-box detail_footer">
				<button hover-class="none" open-type="share" class="footer_img1">
					<image src="https://admin.mosizp.cn/static/public/share.png"></image>
					<view class="text">分享</view>
				</button>
				<!-- <view class="footer_img1" style="margin-left: 60rpx;">
					<image src="https://admin.mosizp.cn/static/public/star.png"></image>
					<view class="text">收藏</view>
				</view> -->
				<button hover-class="none" class="zbtn1 flex-grow-1" @click="bindCall()">拨打电话</button>
				<button hover-class="none" class="zbtn2 flex-grow-1" @click="openTips()">立即报名</button>
			</view>
		</view>
		<view class="container">
			<view class="p30">
				<view class="fwb fs34 col1">培训内容</view>
				<view class="box mt20">
					<view class="item flex-box fs30 col3">
						<view class="flex-grow-1 pr30">机构名称</view>
						<view>{{job.institution.name}}</view>
					</view>
					<view class="item flex-box fs30 col3">
						<view class="flex-grow-1 pr30">培训类型</view>
						<view>{{job.category.name}}</view>
					</view>
					<view class="item flex-box fs30 col3">
						<view class="flex-grow-1 pr30">计划人数</view>
						<view>{{job.plan_count}}</view>
					</view>
					<view class="item flex-box fs30 col3">
						<view class="flex-grow-1 pr30">已报名人数</view>
						<view>{{job.enroll_count}}</view>
					</view>
					<view class="item flex-box fs30 col3">
						<view class="flex-grow-1 pr30">培训专业</view>
						<view>{{job.major.name}}</view>
					</view>
					<view class="item flex-box fs30 col3">
						<view class="flex-grow-1 pr30">培训等级</view>
						<view>{{job.level.name}}</view>
					</view>
					<view class="item flex-box fs30 col3">
						<view class="flex-grow-1 pr30">培训日期</view>
						<view>{{job.train_start_text}}至{{job.train_end_text}}</view>
					</view>
				</view>
				<view class="fwb fs34 col1 mt40">联系方式</view>
				<view class="box mt20">
					<view class="item flex-box fs30 col3">
						<view class="flex-grow-1 pr30">联系人</view>
						<view>{{job.contact}}</view>
					</view>
					<view class="item flex-box fs30 col3">
						<view class="flex-grow-1 pr30">联系电话</view>
						<view>{{job.contact_phone}}</view>
					</view>
					<view class="item flex-box fs30 col3">
						<view class="flex-grow-1 pr30">培训地址</view>
						<view>{{job.address}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="tips" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
			<view class="popup">
			<view class="fwb tc fs34 col3 lh48">是否确认报名</view>
			<view class="flex-box mt60 flex-center">
				<view class="bt1" @click="closeTips()">否</view>
				<view class="bt2" @click="bindEnroll()">是</view>
			</view>
			</view>	
		</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				jobId: 0,
				job: {
					category:{name:''},
					major:{name:''},
					level:{name:''}
				},
				tips: false
				
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			
			this.jobId = options.id;
			this.fetchDetail();
		},
		methods: {
			onShareAppMessage() {
				let title = this.job.institution.name;
				return {
					title: title,
				};
			},
			onShareTimeline() {
				let title = this.job.institution.name;
				return {
					title: title,
				};
			},
			fetchDetail(){
				this.$core.get({url: '/xilujob.train/job_detail/job_id/'+this.jobId,success:ret=>{
				  this.job = ret.data;
				}});
			},
			bindCall(){
				uni.makePhoneCall({
					phoneNumber: this.job.contact_phone
				})
			},
			openTips(){
				this.tips = true;
			},
			closeTips(){
				this.tips=false
			},
			bindEnroll(){
				if(!this.$core.getUserinfo(true)){
					return;
				}
				this.closeTips()
				this.$core.post({url: '/xilujob.train/job_enroll',data: {job_id: this.jobId},success:ret=>{
					uni.showModal({
						title: '提示',
						content: ret.msg,
						showCancel: false,
						success() {
							uni.navigateBack()
						}
					})
				},fail:ret=>{
					uni.showModal({
						title: '提示',
						content: ret.msg,
						success(res) {
							if(res.confirm){
								if(ret.code == -2){
									uni.navigateTo({
										url: '/pages/user/add_train_interest'
									})
								}
							}
						}
					})
					return false;
				}});
			}
		}
	}
</script>

<style lang="scss" scoped>
.box{
	width: 690rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.03);
	border-radius: 18rpx;
	padding: 10rpx 30rpx;
	.item{
		height: 110rpx;
		
	}
	.item+.item{
		border-top: 1px solid #E7E7E7;
	}
}
.detail_footer {
		padding: 14rpx 30rpx;
		background-color: #fff;
	}

	.footer_img1 {
		width: unset;
	}

	.footer_img1 .text {
		
		font-size: 24rpx;
		color: #555555;
		line-height: 26rpx;
		text-align: center;
	}

	.footer_img1 image {
		width: 44rpx;
		height: 44rpx;
		display: block;
		margin: 0 auto 4rpx
	}

	.zbtn1 {
		margin-left: 48rpx !important;
		height: 74rpx;
		background: var(--primary1);
		border-radius: 8rpx;
		line-height: 74rpx;

		font-size: 28rpx;
		color: var(--primary);
		text-align: center;
		font-style: normal;
	}

	.zbtn2 {
		margin-left: 28rpx;
		height: 74rpx;
		background: var(--primary);
		border-radius: 8rpx;
		line-height: 74rpx;
		font-size: 28rpx;
		color: #FFF;
		text-align: center;
	}
	.popup{
		width: 615rpx;
		height: 313rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		border: 1px solid #979797;
		padding: 66rpx 0 40rpx;
		.mt60{margin-top: 60rpx;}
		.bt1{
			width: 236rpx;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: var(--primary);
			border-radius: 8rpx;
		}
		.bt2{
			width: 236rpx;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #FF8B3B;
			border-radius: 8rpx;
			margin-left: 30rpx;
		}
	}
</style>
